<template>
	<view class="square-form">
		<view class="square-form-cell">
			<view class="name">封面图</view>
			<view class="value add">
				<view class="slot-btn" @click="choseImg">
					<u-icon name="camera" size="40" v-if="!form.cover_img"></u-icon>
					<image :src="form.cover_img" v-if="form.cover_img" mode="aspectFit"></image>
				</view>
				<view class="slot-btn-preview" @click.stop="preview" v-if="form.cover_img">查看原图</view>
			</view>
		</view>
		<view class="square-form-cell-input">
			<view class="cell-input-tit">
				<text class="name">风格</text>
				<text class="length"><text>{{form.title.length}}</text>/5</text>
			</view>
			<input placeholder="请输入您喜欢的风格类型哦" v-model="form.title" placeholder-style="color: #9F9F9C" @blur="inputBlur('title')" />
		</view>
		<view class="square-form-cell-input">
			<view class="cell-input-tit">
				<text class="name">说明</text>
				<text class="length"><text>{{form.content.length}}</text>/15</text>
			</view>
			<input placeholder="请输入您创建广场的说明" v-model="form.content" placeholder-style="color: #9F9F9C" @blur="inputBlur('content')" />
		</view>
		<view class="square-form-cell">
			<view class="name">是否公开</view>
			<view class="value">
				<switch @change="switchChange" color="#F59359" style="transform:scale(0.8)" :checked="checked"></switch>
			</view>
		</view>
		<view class="square-form-submit" @click="$u.throttle(submit,2000)">{{square_id?'修改':'创建'}}</view>
	</view>
</template>

<script>
	import md5 from '@/static/utils/md5.min.js'
	export default {
		data() {
			return {
				uploadData: {},
				square_id: '',
				checked: true,
				form: {
					cover_img: '',
					title: '',
					content: '',
					is_open: 1
				}
			};
		},
		onLoad(options) {
			if(options.id){
				this.square_id = options.id
				this.init()
			}
		},
		methods: {
			init(){
				this.$u.api.SquareInfo({square_id: this.square_id}).then(res => {
					this.form = {
						square_id: this.square_id,
						cover_img: res.datas.cover_img,
						title: res.datas.title,
						content: res.datas.content,
						is_open: res.datas.is_open
					}
					if(res.datas.is_open==2){
						this.checked = false
					}else{
						this.checked = true
					}
				})
			},
			switchChange(e){
				if(e.detail.value){
					this.form.is_open = 1
				}else{
					this.form.is_open = 2
				}
			},
			preview(){
				uni.previewImage({
					current: this.form.cover_img,
					urls: [this.form.cover_img]
				})
			},
			objKeySort(obj) {
				var newkey = Object.keys(obj).sort();
				var newObj = {};
				for (var i = 0; i < newkey.length; i++) {
					newObj[newkey[i]] = obj[newkey[i]];
				}
				return newObj;
			},
			initData(){
				let req = {}
				req.timestamp = Math.round(new Date().getTime() / 1000)
				
				// #ifdef H5
				let ua = navigator.userAgent.toLowerCase()
				if (ua.match(/MicroMessenger/i) == "micromessenger") {
					req.port = 'wechat'
				}else{
					req.port = 'h5'
				}
				// #endif
				// #ifdef MP-WEIXIN
				req.port = 'wechat'
				// #endif
				// #ifdef APP-PLUS
				switch(uni.getSystemInfoSync().platform){
					case 'android':
						req.port = 'android'
					  break;
					case 'ios':
						req.port = 'ios'
					  break;
				}
				// #endif
				req.key = JSON.parse(uni.getStorageSync('userInfo')).token
				let obj = 'jjds2020+'
				let newData = this.objKeySort(req)
				for (let i in newData) {
					obj += i + '=' + newData[i] + '&'
				}
				obj = obj.substring(0, obj.length - 1)
				obj += '+jjds2020'
				obj = md5(obj)
				obj = obj.toUpperCase()
				req.sign = obj
				this.uploadData = req
				return req
			},
			choseImg(){
				uni.chooseImage({
					count: 1,
					success: (res) => {
						console.log(res.tempFilePaths)
						uni.uploadFile({
							url: `${this.$domain}/api/Upimg/UpImg`,
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: this.initData(),
							success: (uploadFileRes) => {
								this.form.cover_img = JSON.parse(uploadFileRes.data).datas[0]
							}
						});
					}
				})
			},
			submit(){
				if(!this.form.cover_img){
					return uni.showToast({
						icon: 'none',
						title: '封面图不能为空'
					})
				}else if(!this.form.title){
					return uni.showToast({
						icon: 'none',
						title: '风格标题不能为空'
					})
				}else if(!this.form.content){
					return uni.showToast({
						icon: 'none',
						title: '说明不能为空'
					})
				}
				if(this.square_id){
					this.$u.api.UpdateSquare(this.form).then(res => {
						uni.showToast({
							icon: 'none',
							title: '修改成功',
							success: () => {
								setTimeout(() => {
									uni.navigateBack()
									this.addFoot('家居广场-修改',this.square_id)
								},1500)
							}
						})
					})
				}else{
					this.$u.api.UpSquare(this.form).then(res => {
						uni.showToast({
							icon: 'none',
							title: '添加成功',
							success: () => {
								setTimeout(() => {
									uni.navigateBack()
									this.addFoot('家居广场-添加')
								},1500)
							}
						})
					})
				}
			},
			addFoot(where,goods_id,detail){
				this.$u.api.AddFoot({
					// #ifdef MP-WEIXIN
					type: 1,
					// #endif
					// #ifdef APP-PLUS
					type: 2,
					// #endif
					// #ifdef H5
					type: 3,
					// #endif
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:1,
					client: 1,
					where: where,
					stay_time: 0,
					goods_id: goods_id?goods_id:0,
					store_goods_id: 0,
					is_new: 1,
					detail: detail?detail:''
				})
			},
			inputBlur(type){
				switch (type){
					case 'title':
						if(this.form.title.length > 5){
							this.form.title = this.form.title.substring(0,6)
							uni.showToast({
								icon: 'none',
								title: '标题最多5个字符'
							})
						}
						break;
					case 'content':
						if(this.form.content.length > 15){
							this.form.content = this.form.content.substring(0,16)
							uni.showToast({
								icon: 'none',
								title: '内容最多15个字符'
							})
						}
						break;
				}
			}
		}
	}
</script>

<style lang="scss">
	.square-form{
		padding: 0 30rpx;
		.square-form-cell{
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: solid 2rpx #F5F5F5;
			padding: 50rpx 0;
			.name{
				font-size: 32rpx;
				color: #999;
			}
			.add{
				width: 120rpx;
				height: 120rpx;
				border-radius: 8rpx;
				border: dashed 2rpx #AAA;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				.slot-btn-preview{
					position: absolute;
					bottom: -44rpx;
					line-height: 44rpx;
					font-size: 22rpx;
					color: #808080;
					left: 0;
					right: 0;
					text-align: center;
				}
				.slot-btn{
					position: relative;
					width: 120rpx;
					height: 120rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					image{
						width: 116rpx;
						height: 116rpx;
					}
				}
			}
		}
		.square-form-cell-input{
			border-bottom: solid 2rpx #F5F5F5;
			padding: 50rpx 0;
			.cell-input-tit{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 30rpx;
				font-size: 32rpx;
				color: #444;
				.name{
					color: #999;
				}
				.length{
					color: #9F9F9C;
					text{
						color: #444;
					}
				}
			}
			input{
				font-size: 32rpx;
			}
		}
		.square-form-submit{
			line-height: 90rpx;
			background-color: #F59359;
			color: #FFF;
			text-align: center;
			margin-top: 60rpx;
			font-size: 32rpx;
			border-radius: 8rpx;
		}
	}
</style>
